import * as React from "react";
import styles from "./style.less";

export interface OptionsProps {
  visible: boolean;
  x: number;
  y: number;
  node: Element;
  type: "tag-name" | "tag-attr" | "content";
  attr?: Attr;
  onFinish: () => void;
  onCancel: () => void;
}

export default (props: OptionsProps) => {
  const { x, y, visible, node, type, attr, onFinish, onCancel } = props;

  const ContentDialog = () => {
    const info = prompt("修改内容:", node.textContent);
    if (info) {
      node.textContent = info;
      onFinish();
    } else {
      onCancel();
    }
  };
  const NodeDialog = () => {
    const info = prompt("新增子节点, 请输入节点名称:");
    if (info) {
      if (!/^[a-zA-Z]/.test(info)) {
        alert("标签名称格式错误");
        NodeDialog();
      } else {
        let el = document.createElement(info);
        node.appendChild(el);
        onFinish();
      }
    } else {
      onCancel();
    }
  };
  const NodeDeleteDialog = () => {
    const info = window.confirm("确定删除当前节点?");
    if (info) {
      node.remove();
      onFinish();
    } else {
      onCancel();
    }
  };
  const NodeNameDialog = () => {
    const info = prompt("修改节点名称, 请输入节点名称:", node.nodeName);
    if (info) {
      let el = document.createElement(info);
      el.innerHTML = node.innerHTML;
      if (node.hasAttributes()) {
        [...node.attributes].forEach((attr) => {
          el.setAttribute(attr.name, attr.value);
        });
      }
      node.replaceWith(el);
      onFinish();
    } else {
      onCancel();
    }
  };
  const NodeAttrDialog = () => {
    const info = prompt(
      "新增或修改属性, 请输入属性(name=value):",
      attr && `${attr.name}=${attr.value}`
    );
    if (info) {
      const [all, name, value] = info.match(/^(\w+)=(\w+)$/) || [];
      if (all) {
        node.setAttribute(name, value);
        onFinish();
      } else {
        alert("格式错误!");
        NodeAttrDialog();
      }
    } else {
      onCancel();
    }
  };
  const children: React.ReactElement[] = [];
  switch (type) {
    case "content":
      children.push(
        <li key="content" onClick={ContentDialog}>
          修改内容
        </li>
      );
      break;
    case "tag-name":
      children.push(
        <li key="addnode" onClick={NodeDialog}>
          新增子节点
        </li>
      );
      children.push(
        <li key="nodename" onClick={NodeNameDialog}>
          修改节点名称
        </li>
      );
      children.push(
        <li key="addattr" onClick={NodeAttrDialog}>
          新增属性
        </li>
      );
      children.push(
        <li key="content" onClick={ContentDialog}>
          修改内容
        </li>
      );
      children.push(
        <li key="nodedele" onClick={NodeDeleteDialog}>
          删除节点
        </li>
      );
      break;
    case "tag-attr":
      children.push(
        <li key="addattr" onClick={NodeAttrDialog}>
          修改属性
        </li>
      );
      break;
  }

  return (
    visible && (
      <ul
        className={styles["menu-context"]}
        style={{
          position: "absolute",
          left: x,
          top: y
        }}
      >
        {children}
      </ul>
    )
  );
};

export const toClose = (onclose = () => {}) => (e) => {
  let target = e.target as Element;
  const _this = document.querySelector(styles["menu-context"]);
  while (target !== document.body) {
    if (target === _this) {
      return;
    } else {
      target = target.parentElement;
    }
  }
  onclose();
};
